<template>
	<div id="syllabus_list" class="container">
		<div class="title">
			{{title}}
		</div>
		<div class="bar">
			<div class="bar_left">
				<div class="bar_btn_left" @click="turnWeek(-1)" v-if="!hasNext"></div>
				<div class="bar_btn_right" @click="turnWeek(1)" v-if="hasNext"></div>
				<div class="weekList">
					<div v-for="item in dateList" class="week">{{item.week}}</div>
				</div>
				<div class="dayList">
					<div v-for="item in dateList" class="day">
						<div :class="[item.isToday? 'day_today':'', item.day == checkDay2? 'day_active':'']"
							 class="day_1" @click="selectDay(item.day)">{{item.date}}</div>
							 <!--item.day != checkDay2-->
						<div class="day_2" v-if="item.day!=checkDay2 && item.hasPoint"></div>
					</div>
				</div>
			</div>
			<div class="check">
				<div class="check_1"></div>
				<div class="check_2">
					<div>{{syllabusNum}}</div>
					<div>当日课节数</div>
				</div>
				<div class="check_3">
					<div>{{checkDay3}}</div>
					<div>{{checkDay4}}</div>
				</div>
			</div>
		</div>
		
		<div class="stable">
			<div class="shead">
				<div style="width: 2.6rem;">上课时间</div>
				<div style="width: 2.2rem;">上课课节</div>
				<div style="width: 1.6rem;">上课时长</div>
				<div style="width: 2.6rem;">班级</div>
				<div style="width: 1.3rem;">类型</div>
				<div style="width: 4.5rem;outline: 1px solid red;">操作</div>
			</div>
			
			<div v-for="item in syllabusList" class="str" :class="getClass(item.status)">
				<div style="width: 2.6rem;">
					{{item.time}}
					<span class="mark_span" v-if="item.status=='上课中'">上课中</span>
					<span class="mark_span" v-if="item.startTime==nearStartTime">即将上课</span>
				</div>
				<div style="width: 2.2rem;">{{item.classSyllabusName}}</div>
				<div style="width: 1.6rem;">{{item.classHour}}min</div>
				<div style="width: 2.6rem;">{{item.className}}</div>
				<div style="width: 1.3rem;">{{classTypeMap[item.classTypeMode]}}</div>
				<div style="width: 4.5rem;">操作</div>
			</div>
		</div>
	</div>
</template>

<script>
var vm,dict;
export default {
	data : function() {
		return {
			param : {
				campusId : null,
				startTime : null,
				endTime : null,
				containTrialClass : 1
			},
			checkDay : new Date(),
			dateList : [],
			syllabusList : null,
			syllabusData : {},
			nearStartTime : null, //最近的开课时间
			
		}
	},
	computed : {
		campusId : function() {
			return this.$store.state.campusId
		},
		checkDay2 : function() {
			return tool.DateToString(this.checkDay, "yyyy-MM-dd")
		},
		checkDay3 : function() {
			return tool.DateToString(this.checkDay, "M月d日");
		},
		checkDay4 : function() {
			var week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
			return week[this.checkDay.getDay()];
		},
		title : function() {
			if(this.dateList.length == 0) {
				return "";
			}
			//取日期列表第一天的月份
			var day = this.dateList[0].day;
			day = new Date(day);
			return tool.DateToString(day, "M月，yyyy");
		},
		hasNext : function() {
			if(this.dateList.length == 0) {
				return true;
			}
			//判断日期列表是否大于今天,满足只显示本周和下周的需求
			var today = tool.DateToString(new Date(), "yyyy-MM-dd");
			//取日期列表第一天的
			var day = this.dateList[0].day;
			return day <= today;
		},
		syllabusNum : function() {
			if(this.syllabusList) {
				return this.syllabusList.length;
			} else {
				return "";
			}
		}
	},
	methods : {
		getClass : function(status) {
			if(status == "已结课") {
				return "str_invalid";
			}
			if(status == "上课中") {
				return "str_active";
			}
		},
		search : function() {
			vm.param.campusId = vm.campusId;
			api.getClassSyllabus(vm.param).then(function(data) {
				
				var s = vm.syllabusData;
				data.listSyllabus.forEach(function(syllabus) {
					//计算上课时间,默认状态
					syllabus.time = syllabus.startTime.substring(11, 16) + "-" + syllabus.endTime.substring(11, 16);
					syllabus.status = "待开课";
					//获取日期
					var d = syllabus.startTime.substring(0, 10);
					//分类到对应的数组中
					s[d] = s[d] || [];
					s[d].push(syllabus);
				});
				vm.setPoint();
				//如果课节列表为null,代表初次搜索
				if(!vm.syllabusList) {
					vm.syllabusList = s[vm.checkDay2] || [];
					vm.setStatus();
				}
			})
		},
		selectDay : function(day) {
			vm.checkDay = new Date(day);
			vm.syllabusList = vm.syllabusData[day] || [];
			vm.setStatus();
		},
		turnWeek : function(sign) {
			//翻到上周或下周的目标日期
			var day = new Date(vm.dateList[0].day);
			day.setDate(day.getDate() + 7 * sign);
			//重设时间
			vm.setTime(day);
			
			//判断目标日期是否在数据集中,不在则重新请求,存在则不必重复请求
			var dayStr = tool.DateToString(day, "yyyy-MM-dd");
			if(!vm.syllabusData[dayStr]){
				vm.search();
			} else {
				vm.setPoint();
			}
		},
		setTime : function(c) {
			//克隆选择日期,获取今天
			c = tool.clone(c);
			var today = tool.DateToString(new Date(), "yyyy-MM-dd");
			//日期列表
			var weekList = ["一", "二", "三", "四", "五", "六", "日"];
			vm.dateList = [];
			
			//设置开始结束时间,周一
			c.setDate(c.getDate() - c.getDay());
			
			//周二到周日
			for(let i=0; i<7; i++) {
				c.setDate(c.getDate() + 1);
				let day = tool.DateToString(c, "yyyy-MM-dd");
				vm.dateList.push({
					date : c.getDate(),
					week : weekList[i],
					day : day,
					isToday : today == day,
					hasPoint : false
				});
			}
			
			vm.param.startTime = vm.dateList[0].day + " 00:00:00";
			vm.param.endTime = vm.dateList[6].day + " 23:59:59";
		},
		setPoint : function() {
			vm.dateList.forEach(function(item) {
				var list = vm.syllabusData[item.day] || [];
				item.hasPoint = (list.length>0);
			});
		},
		setStatus : function() {
			var now = tool.DateToString(new Date(), "yyyy-MM-dd HH:mm:dd");
			//下次开课时间已经过期,清空
			if(vm.nearStartTime < now) {
				vm.nearStartTime = null;
			}
			vm.syllabusList.forEach(function(syllabus) {
				var start = syllabus.startTime + ":00";
				var end = syllabus.endTime + ":00";
				
				if(end <= now) {
					syllabus.status = "已结课";
					return;
				}
				if(start <= now && now < end) {
					syllabus.status = "上课中";
					return;
				}
				
				syllabus.status = "待开课";
				//没有最近开课时间,或者这个课节的开课时间比记录的最近开课时间还小,则替换
				if(!vm.nearStartTime || start < vm.nearStartTime) {
					vm.nearStartTime = start;
				}
			})
		}
	},
	watch : {
		campusId : function() {
			vm.syllabusList = null;
			vm.syllabusData = {};
			vm.search();
		}
	},
	mounted : function() {
		
		
	},
	created : function() {
		vm = this;
		//数据字典
		dict = tool.getItem(lsKey.dict, true);
		vm.classTypeMap = tool.parseDict(dict["class_type_mode"]);
		
		vm.setTime(vm.checkDay);
//		
//		//查询
		vm.search();
		
	}
}
</script>

<style scoped lang="scss" src="@/style/work_platform/syllabus_list_2.css">

</style>